<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/1/28
  Time: 18:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/libs/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/libs/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<%--
.table	为任意 <table> 添加基本样式 (只有横向分隔线)	尝试一下
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)	尝试一下
.table-bordered	为所有表格的单元格添加边框	尝试一下
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态	尝试一下
.table-condensed	让表格更加紧凑
--%>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <h3>简单表格</h3>
                <table class="table">
                    <thead>
                    <tr>
                        <th>姓氏</th>
                        <th>名字</th>
                        <th>出生日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>张</td>
                        <td>三</td>
                        <td>1990-10-11</td>
                    </tr>
                    <tr>
                        <td>李</td>
                        <td>四</td>
                        <td>1990-11-11</td>
                    </tr>
                    <tr>
                        <td>王</td>
                        <td>五</td>
                        <td>1988-10-08</td>
                    </tr>
                    <tr>
                        <td>赵</td>
                        <td>六</td>
                        <td>1990-08-11</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="col-sm-4">
                <h3>斑马线表格</h3>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>姓氏</th>
                        <th>名字</th>
                        <th>出生日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>诸葛</td>
                        <td>孔明</td>
                        <td>1567-09-11</td>
                    </tr>
                    <tr>
                        <td>刘</td>
                        <td>玄德</td>
                        <td>1567-09-09</td>
                    </tr>
                    <tr>
                        <td>张</td>
                        <td>翼德</td>
                        <td>1777-09-22</td>
                    </tr>
                    <tr>
                        <td>关</td>
                        <td>云长</td>
                        <td>1887-09-31</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="col-sm-4">
                <h3>带边框线表格</h3>
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>姓氏</th>
                        <th>名字</th>
                        <th>出生日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>诸葛</td>
                        <td>孔明</td>
                        <td>1567-09-11</td>
                    </tr>
                    <tr>
                        <td>刘</td>
                        <td>玄德</td>
                        <td>1567-09-09</td>
                    </tr>
                    <tr>
                        <td>张</td>
                        <td>翼德</td>
                        <td>1777-09-22</td>
                    </tr>
                    <tr>
                        <td>关</td>
                        <td>云长</td>
                        <td>1887-09-31</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <h3>鼠标事件表格</h3>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>姓氏</th>
                        <th>名字</th>
                        <th>出生日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>诸葛</td>
                        <td>孔明</td>
                        <td>1567-09-11</td>
                    </tr>
                    <tr>
                        <td>刘</td>
                        <td>玄德</td>
                        <td>1567-09-09</td>
                    </tr>
                    <tr>
                        <td>张</td>
                        <td>翼德</td>
                        <td>1777-09-22</td>
                    </tr>
                    <tr>
                        <td>关</td>
                        <td>云长</td>
                        <td>1887-09-31</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-sm-6">
                <h3>紧凑表格</h3>
                <table class="table table-condensed">
                    <thead>
                    <tr>
                        <th>姓氏</th>
                        <th>名字</th>
                        <th>出生日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>诸葛</td>
                        <td>孔明</td>
                        <td>1567-09-11</td>
                    </tr>
                    <tr>
                        <td>刘</td>
                        <td>玄德</td>
                        <td>1567-09-09</td>
                    </tr>
                    <tr>
                        <td>张</td>
                        <td>翼德</td>
                        <td>1777-09-22</td>
                    </tr>
                    <tr>
                        <td>关</td>
                        <td>云长</td>
                        <td>1887-09-31</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <%--
<tr>, <th> 和 <td> 类
下表的类可用于表格的行或者单元格：
类	描述	实例
.active	将悬停的颜色应用在行或者单元格上	尝试一下
.success	表示成功的操作	尝试一下
.info	表示信息变化的操作	尝试一下
.warning	表示一个警告的操作	尝试一下
.danger	表示一个危险的操作
--%>
        <div class="row">
            <div class="col-sm-12">
                <h3>强调表格</h3>
                <table class="table table-condensed">
                    <thead>
                    <tr class="active">
                        <th>姓氏</th>
                        <th>名字</th>
                        <th>出生日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="success">
                        <td>诸葛</td>
                        <td>孔明</td>
                        <td>1567-09-11</td>
                    </tr>
                    <tr class="info">
                        <td>刘</td>
                        <td>玄德</td>
                        <td>1567-09-09</td>
                    </tr>
                    <tr class="warning">
                        <td>张</td>
                        <td>翼德</td>
                        <td>1777-09-22</td>
                    </tr>
                    <tr class="danger">
                        <td>关</td>
                        <td>云长</td>
                        <td>1887-09-31</td>
                    </tr>
                    <tr>
                        <td class="info">赵</td>
                        <td class="warning">子龙</td>
                        <td class="danger">1899-09-31</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>


    </div>




</body>
</html>
